<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="skin/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<link href="skin/smoothness/jHtmlArea.css" rel="stylesheet" type="text/css" />
<link href="skin/smoothness/ranidae.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="libraries/jquery-1.9.1.js"></script>
<script type="text/javascript" src="libraries/jquery-ui.js"></script>
<script type="text/javascript" src="libraries/jHtmlArea-0.7.5.js"></script>
<script type="text/javascript" src="libraries/jHtmlArea.ColorPickerMenu-0.7.0.js"></script>
<script type="text/javascript" src="libraries/ranidae.js"></script>
<script type="text/javascript" src="libraries/tmp.js"></script>
<script type="text/javascript" src="include/category.js"></script>
<script type="text/javascript" src="Article/article.js"></script>
<script type="text/javascript" src="Article/article.edit.window.js"></script>
<script type="text/javascript" src="Article/article.read.window.js"></script>
<script type="text/javascript" src="Article/article.window.js"></script>
<script type="text/javascript" src="User/user.window.js"></script>
<script type="text/javascript" src="init.js"></script>
<script type="text/javascript">

</script>
<link href="skin/smoothness/base.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="main-tabs">
	<ul>
		<li><a href="#tabs-article">Article</a></li>
		<li><a href="#tabs-todo">ToDo</a></li>
		<li><a href="#tabs-photo">Photo</a></li>
		<li><a href="#tabs-voice">Voice</a></li>
		<li><a href="#tabs-video">Video</a></li>
		<li><a href="#tabs-message">Msg</a></li>
		<li><a href="#tabs-file">File</a></li>
		<li><a href="#tabs-user">Me</a></li>
	</ul>
	<div id="tabs-article">
		<div id="article-and-category-list-container" class="service-container">
			<div id="article-list-tool-bar">
				<div id="article-list-write-new">Write New</div> 
				<div id="article-category-list-container">
					<div class="article-category-list-item ui-widget-header ui-state-default" category="{categoryId}" sonCount="{categorySonCount}" isTemplete="true" templete="articleCategoryItem">
						<div class="article-category-list-item-name">{categoryName}({categorySonCount})</div> 
						<div class="article-category-list-item-action">
							<span class="article-category-list-item-action-download">Download</span>
							<span class="article-category-list-item-action-rename">Rename</span>
						</div>
					</div>
				</div>
				<div class="article-category-list-add-new">
					<input id="article-category-list-new-name" class="ui-corner-all" type="text" /><br/>
					<span id="article-category-list-item-action-add" >Add Category</span>
				</div>
			</div>
			<div id="article-list-container">
				<div class="article-list-item ui-widget-header ui-state-default" article="{articleId}" isTemplete="true" templete="articleListItem">
					<div class="article-list-item-title" >{articleTitle}</div>
					<div class="article-list-item-action"> 
						<span class="article-list-item-action-lock">Lock</span>
						<span class="article-list-item-action-edit">Edit</span>
						<span class="article-list-item-action-download">Download</span>
						<span class="article-list-item-action-move">Move</span>
					</div>
					<div class="article-list-item-info"><span>{articleWroteAt}</span></div>
				</div>
			</div> 
		</div>
		
		<div id="article-read-container" class="service-container">
			<div id="article-read-title"></div>
			<div id="article-read-content"></div>
			<div id="article-read-information-action-container">
				<div id="article-read-information">
					<span id="article-read-information-return-back">Return</span>
				</div>
				<div id="article-read-action" class="ui-widget-header ui-corner-all">
					<span id="article-read-action-lock">Lock</span>
					<span id="article-read-action-edit">Edit</span>
					<span id="article-read-action-download">Download</span>
					<span id="article-read-action-move">Move</span>				</div>
			</div>
		</div>
		
		<div id="article-edit-container" class="service-container">
			<div id="article-write-title-container">
				<input id="article-write-title" type="text" title="Title's here." />
			</div>
			<div id="article-write-content-container">
				<textarea id="article-write-content" class="ui-state-default ui-corner-all"></textarea>
			</div> 
			<div id="article-write-tool-container"> 
				<input id="article-write-return" class="article-edit-button" type="button" value="Return" />
				<input id="article-write-save" class="article-edit-button" type="button" value="Save" />
				<select id="article-write-category" class="ui-state-default ui-corner-all"></select>
			</div>
		</div>	
	</div>
	<div id="tabs-todo">
		<div id="tabs-todo-manage">
			<div id="tabs-todo-manage-add-todo">Add Todo</div>
			<div id="tabs-todo-manage-project-list">
				<div class="tabs-todo-manage-project-list-item">
					<div>Project 01</div>
					<div class="padding-top-5 sp-line-top">
						<div class="left">Finish</div>
						<div class="right">
							<span>Rename</span>
							<span>Show All</span>
						</div>
					</div>
				</div>
			</div>
			<div id="tabs-todo-manage-add-project">Add project</div>
		</div>
		<div id="tabs-todo-list">
			<div class="list-item-middle-hight">
				<div>Todo 01</div>
				<div class="sp-line-top text-right">
					<div class="left">
						<span>Left:5 Hours </span> 
						<span>Pro: very high </span>
					</div>
					<div class="right">
						<span>Finished</span>
					</div>
				</div>
			</div>
			<div class="list-item-middle-hight">
				<div>Todo 01</div>
				<div class="sp-line-top text-right">
					<div class="left">
						<span>Left:5 Hours </span> 
						<span>Pro: very high </span>
					</div>
					<div class="right">
						<span>Finished</span>
					</div>
				</div>
			</div>
			<div class="list-item-middle-hight">
				<div>Todo 01</div>
				<div class="sp-line-top text-right">
					<div class="left">
						<span>Left:5 Hours </span> 
						<span>Pro: very high </span>
					</div>
					<div class="right">
						<span>Finished</span>
					</div>
				</div>
			</div>
			<div class="list-item-middle-hight">
				<div>Todo 01</div>
				<div class="sp-line-top text-right">
					<div class="left">
						<span>Left:5 Hours </span> 
						<span>Pro: very high </span>
					</div>
					<div class="right">
						<span>Finished</span>
					</div>
				</div>
			</div>
			<div class="list-item-middle-hight">
				<div>Todo 01</div>
				<div class="sp-line-top text-right">
					<div class="left">
						<span>Left:5 Hours </span> 
						<span>Pro: very high </span>
					</div>
					<div class="right">
						<span>Finished</span>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div id="tabs-photo">
		<div id="tabs-photo-manage" class="manage-bar">
			<div id="tabs-photo-manage-add-photo" class="manage-add">Upload Photo</div>
			<div id="tabs-photo-manage-project-list" class="manage-list">
				<div class="manage-list-item">
					<div>Project 01</div>
					<div class="padding-top-5 sp-line-top">
						<div class="left">Finish</div>
						<div class="right">
							<span>Rename</span>
							<span>Show All</span>
						</div>
					</div>
				</div>
			</div>
			<div class="manage-add-category">Add project</div>
		</div>
		<div class="content-list">
			<div class="content-list-item-square">
				<div class="content-list-item-square-view"></div>
				<div class="content-list-item-square-name"></div>
				<div class="content-list-item-square-action"></div>
			</div>
			<div class="content-list-item-square">
				<div class="content-list-item-square-view"></div>
				<div class="content-list-item-square-name"></div>
				<div class="content-list-item-square-action"></div>
			</div>
			<div class="content-list-item-square">
				<div class="content-list-item-square-view"></div>
				<div class="content-list-item-square-name"></div>
				<div class="content-list-item-square-action"></div>
			</div>
			<div class="content-list-item-square">
				<div class="content-list-item-square-view"></div>
				<div class="content-list-item-square-name"></div>
				<div class="content-list-item-square-action"></div>
			</div>
			<div class="content-list-item-square">
				<div class="content-list-item-square-view"></div>
				<div class="content-list-item-square-name"></div>
				<div class="content-list-item-square-action"></div>
			</div>
		</div>
	</div>
	<div id="tabs-voice">
		<div id="tabs-voice-manage" class="manage-bar">
			<div id="tabs-voice-manage-add-voice" class="manage-add">Upload Voice</div>
			<div class="manage-list">
				<div class="manage-list-item">
					<div>Project 01</div>
					<div class="padding-top-5 sp-line-top">
						<div class="left">Finish</div>
						<div class="right">
							<span>Rename</span>
							<span>Show All</span>
						</div>
					</div>
				</div>
			</div>
			<div class="manage-add-category">Add project</div>
		</div>
		<div class="content-list">
			<div class="content-list-item-rectangle">
				<div>ss</div>
				<div class="sp-line-top">
					<div class="left">Infor</div>
					<div class="right">Action</div>
				</div>
			</div>
			<div class="content-list-item-rectangle">
				<div>ss</div>
				<div class="sp-line-top">
					<div class="left">Infor</div>
					<div class="right">Action</div>
				</div>
			</div>
			<div class="content-list-item-rectangle">
				<div>ss</div>
				<div class="sp-line-top">
					<div class="left">Infor</div>
					<div class="right">Action</div>
				</div>
			</div>
			<div class="content-list-item-rectangle">
				<div>ss</div>
				<div class="sp-line-top">
					<div class="left">Infor</div>
					<div class="right">Action</div>
				</div>
			</div>
			<div class="content-list-item-rectangle">
				<div>ss</div>
				<div class="sp-line-top">
					<div class="left">Infor</div>
					<div class="right">Action</div>
				</div>
			</div>
		</div>
	</div>
	<div id="tabs-video">
		<div id="tabs-video-manage" class="manage-bar">
			<div id="tabs-video-manage-add-video" class="manage-add">Add Video</div>
			<div class="manage-list">
				<div class="manage-list-item">
					<div>Project 01</div>
					<div class="padding-top-5 sp-line-top">
						<div class="left">Finish</div>
						<div class="right">
							<span>Rename</span>
							<span>Show All</span>
						</div>
					</div>
				</div>
			</div>
			<div class="manage-add-category">Add project</div>
		</div>
		<div class="content-list">
			<div class="content-list-item-square">
				<div class="content-list-item-square-view"></div>
				<div class="content-list-item-square-name"></div>
				<div class="content-list-item-square-action"></div>
			</div>
			<div class="content-list-item-square">
				<div class="content-list-item-square-view"></div>
				<div class="content-list-item-square-name"></div>
				<div class="content-list-item-square-action"></div>
			</div>
			<div class="content-list-item-square">
				<div class="content-list-item-square-view"></div>
				<div class="content-list-item-square-name"></div>
				<div class="content-list-item-square-action"></div>
			</div>
			<div class="content-list-item-square">
				<div class="content-list-item-square-view"></div>
				<div class="content-list-item-square-name"></div>
				<div class="content-list-item-square-action"></div>
			</div>
			<div class="content-list-item-square">
				<div class="content-list-item-square-view"></div>
				<div class="content-list-item-square-name"></div>
				<div class="content-list-item-square-action"></div>
			</div>
		</div>
	</div>
	<div id="tabs-message">
		<div id="tabs-message-manage" class="manage-bar">
			<div id="tabs-message-manage-add-message" class="manage-add">Add Message</div>
			<div class="manage-list">
				<div class="manage-list-item">
					<div>Project 01</div>
					<div class="padding-top-5 sp-line-top">
						<div class="left">Finish</div>
						<div class="right">
							<span>Rename</span>
							<span>Show All</span>
						</div>
					</div>
				</div>
			</div>
			<div class="manage-add-category">Add project</div>
		</div>
		<div class="content-list">
			<div class="content-list-item-rectangle">
				<div>ss</div>
				<div class="sp-line-top">
					<div class="left">Infor</div>
					<div class="right">Action</div>
				</div>
			</div>
			<div class="content-list-item-rectangle">
				<div>ss</div>
				<div class="sp-line-top">
					<div class="left">Infor</div>
					<div class="right">Action</div>
				</div>
			</div>
			<div class="content-list-item-rectangle">
				<div>ss</div>
				<div class="sp-line-top">
					<div class="left">Infor</div>
					<div class="right">Action</div>
				</div>
			</div>
			<div class="content-list-item-rectangle">
				<div>ss</div>
				<div class="sp-line-top">
					<div class="left">Infor</div>
					<div class="right">Action</div>
				</div>
			</div>
			<div class="content-list-item-rectangle">
				<div>ss</div>
				<div class="sp-line-top">
					<div class="left">Infor</div>
					<div class="right">Action</div>
				</div>
			</div>		
		</div>
	</div>
	<div id="tabs-file">
		<div id="tabs-file-manage" class="manage-bar">
			<div id="tabs-file-manage-add-file" class="manage-add">Add File</div>
			<div class="manage-list">
				<div class="manage-list-item">
					<div>Project 01</div>
					<div class="padding-top-5 sp-line-top">
						<div class="left">Finish</div>
						<div class="right">
							<span>Rename</span>
							<span>Show All</span>
						</div>
					</div>
				</div>
			</div>
			<div class="manage-add-category">Add project</div>
		</div>
		<div class="content-list">
			<div class="content-list-item-rectangle">
				<div>ss</div>
				<div class="sp-line-top">
					<div class="left">Infor</div>
					<div class="right">Action</div>
				</div>
			</div>
			<div class="content-list-item-rectangle">
				<div>ss</div>
				<div class="sp-line-top">
					<div class="left">Infor</div>
					<div class="right">Action</div>
				</div>
			</div>
			<div class="content-list-item-rectangle">
				<div>ss</div>
				<div class="sp-line-top">
					<div class="left">Infor</div>
					<div class="right">Action</div>
				</div>
			</div>
			<div class="content-list-item-rectangle">
				<div>ss</div>
				<div class="sp-line-top">
					<div class="left">Infor</div>
					<div class="right">Action</div>
				</div>
			</div>
			<div class="content-list-item-rectangle">
				<div>ss</div>
				<div class="sp-line-top">
					<div class="left">Infor</div>
					<div class="right">Action</div>
				</div>
			</div>		
		</div>
	</div>
	<div id="tabs-user">
		<div id="tabs-user-accordion">
			<h3>Skin</h3>
			<div>
				<p>Mauribulum a velit eu ante scelerisque vulputate.</p>
			</div>
			<h3>Section 2</h3>
			<div>
				<p>Sed </p>
			</div>
			<h3>Section 3</h3>
			<div>
				<p>Nam am nisi, eu iaculis leo purus venenatis dui. </p>
				<ul>
					<li>List item one</li><li>List item one</li><li>List item one</li><li>List item one</li>
					<li>List item two</li><li>List item one</li><li>List item one</li><li>List item one</li>
					<li>List item three</li><li>List item one</li><li>List item one</li><li>List item one</li>
					<li>List item one</li><li>List item one</li><li>List item one</li><li>List item one</li>
					<li>List item two</li><li>List item one</li><li>List item one</li><li>List item one</li>
					<li>List item three</li><li>List item one</li><li>List item one</li><li>List item one</li>
					<li>List item one</li><li>List item one</li><li>List item one</li><li>List item one</li>
					<li>List item two</li><li>List item one</li><li>List item one</li><li>List item one</li>
					<li>List item three</li><li>List item one</li><li>List item one</li><li>List item one</li>
					<li>List item one</li><li>List item one</li><li>List item one</li><li>List item one</li>
					<li>List item two</li><li>List item one</li><li>List item one</li><li>List item one</li>
					<li>List item three</li><li>List item one</li><li>List item one</li><li>List item one</li>
				</ul>
			</div>
			<h3>Section 4</h3>
			<div>
				<p>Crasos. </p>
			</div>
		</div>
	</div>
</div>
</body>
</html>
